<template>
    <div class="home">
        <div class="container">
            <div class="main-content">
                <div class="info-block left-block">
                    <div class="block-name">今日总运输垃圾量</div>
                    <div class="bar-chart" ref="rubbishChartBox">
                        <div id="rubbishChart" ref="rubbishChart"></div>
                        <div class="bar-count">
                            <div class="num">
                                <span class="f32">43410</span>
                                <span class="unit f20">吨</span>
                            </div>
                            <div class="word f24">总垃圾量</div>
                        </div>
                    </div>
                </div>
                <div class="center-block">
                    <div class="count-line">
                        <div class="count-word">
                            <p>服务</p>
                            <p>总面积</p>
                        </div>
                        <div class="clearfix">
                            <div class="fl count-item" v-for="i in 9" :key="i">{{ i }}</div>
                        </div>
                    </div>
                    <div style="margin-top: 20px;">
                        <img src="@/assets/images/home-map.png" alt="" />
                    </div>
                </div>
                <div class="info-block right-block">
                    <div class="car-item">
                        <div class="icon-box column-flex-box">
                            <img src="@/assets/images/icon-car1.png" alt="" />
                            <p class="word f20">运输车</p>
                        </div>
                        <div class="count-box column-flex-box">
                            <p class="word f18">总车辆</p>
                            <p class="num">1009</p>
                        </div>
                        <div class="count-box column-flex-box">
                            <p class="word f18">今日工作</p>
                            <p class="num yellow">1009</p>
                        </div>
                    </div>
                    <div class="car-item">
                        <div class="icon-box column-flex-box">
                            <img src="@/assets/images/icon-car2.png" alt="" />
                            <p class="word f20">清扫车</p>
                        </div>
                        <div class="count-box column-flex-box">
                            <p class="word f18">总车辆</p>
                            <p class="num">1009</p>
                        </div>
                        <div class="count-box column-flex-box">
                            <p class="word f18">今日工作</p>
                            <p class="num yellow">1009</p>
                        </div>
                    </div>
                    <div class="car-item">
                        <div class="icon-box column-flex-box">
                            <img src="@/assets/images/icon-car3.png" alt="" />
                            <p class="word f20">晒水车</p>
                        </div>
                        <div class="count-box column-flex-box">
                            <p class="word f18">总车辆</p>
                            <p class="num">1009</p>
                        </div>
                        <div class="count-box column-flex-box">
                            <p class="word f18">今日工作</p>
                            <p class="num yellow">1009</p>
                        </div>
                    </div>
                    <div class="car-item">
                        <div class="icon-box column-flex-box">
                            <img src="@/assets/images/icon-p.png" alt="" />
                            <p class="word f20">作业人员</p>
                        </div>
                        <div class="count-box column-flex-box">
                            <p class="word f18">总人数</p>
                            <p class="num">1009</p>
                        </div>
                        <div class="count-box column-flex-box">
                            <p class="word f18">今日工作</p>
                            <p class="num yellow">1009</p>
                        </div>
                    </div>
                    <div class="car-item">
                        <div class="icon-box column-flex-box">
                            <img src="@/assets/images/icon-f.png" alt="" />
                            <p class="word f20">垃圾中转站</p>
                        </div>
                        <div class="count-box column-flex-box">
                            <p class="word f18">总站点数</p>
                            <p class="num">1009</p>
                        </div>
                        <div class="count-box column-flex-box">
                            <p class="word f18">垃圾量(吨)</p>
                            <p class="num yellow">1009</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom-content">
                <div class="title f24">垃圾再利用</div>
                <div class="content">
                    <div class="lj-item item1">
                        <div class="num"><span>200000</span></div>
                        <div class="word">垃圾再利用总量</div>
                    </div>
                    <div class="lj-item item2">
                        <div class="num">
                            <span>2000</span>
                            <span class="unit">度</span>
                        </div>
                        <div class="word">产生电量</div>
                    </div>
                    <div class="lj-item item3">
                        <div class="num"><span>200000</span></div>
                        <div class="word">减少碳排</div>
                    </div>
                    <div class="lj-item item4">
                        <div class="num"><span>200000</span></div>
                        <div class="word">减少碳排</div>
                    </div>
                    <div class="lj-item item5">
                        <div class="num">
                            <span>2000</span>
                            <span class="unit">棵</span>
                        </div>
                        <div class="word">树</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    mounted() {
        const self = this
        const pieDatas = [
            {
                value: 60,
                name: '不可回收垃圾'
            },
            {
                value: 25,
                name: '可回收垃圾'
            },
            {
                value: 30,
                name: '其他垃圾'
            },
            {
                value: 10,
                name: '有害垃圾'
            }
        ]
        const bgList = ['#273d36', '#253463', '#313d51', '#1f3967'] // 外层环颜色
        const colorList = ['#e6fc80', '#b59cfd', '#f8c583', '#f8c583'] // 内层环背景色
        const option = {
            angleAxis: {
                show: false,
                max: 100,
                startAngle: 90,
                splitLine: {
                    show: false //隐藏分隔线
                }
            },
            radiusAxis: {
                show: false,
                type: 'category',
                data: ['不可回收垃圾', '可回收垃圾', '其他垃圾', '有害垃圾']
            },
            polar: {
                center: ['50%', '36%'],
                radius: ['50%', '94%']
            },
            tooltip: {
                show: true
            },
            series: [
                { //上层的圆环
                    type: 'bar',
                    barWidth: 8,
                    data: [60, 0, 0, 0],
                    coordinateSystem: 'polar',
                    name: '不可回收垃圾',
                    stack: '外圆',
                    roundCap: true,
                    animationEasing: 'quadraticIn', //初始动画
                    barGap: '-100%', //柱间距离,用来将上下两种圆环重合
                    z: 200, //圆环层级，和zindex相似
                    itemStyle: {
                        color: colorList[0]
                    }
                },
                { //上层的圆环
                    type: 'bar',
                    barWidth: 8,
                    data: [0, 25, 0, 0],
                    coordinateSystem: 'polar',
                    name: '可回收垃圾',
                    stack: '外圆',
                    roundCap: true,
                    animationEasing: 'quadraticIn', //初始动画
                    barGap: '-100%', //柱间距离,用来将上下两种圆环重合
                    z: 200, //圆环层级，和zindex相似
                    itemStyle: {
                        color: colorList[1]
                    }
                },
                { //上层的圆环
                    type: 'bar',
                    barWidth: 8,
                    data: [0, 0, 30, 0],
                    coordinateSystem: 'polar',
                    name: '其他垃圾',
                    stack: '外圆',
                    roundCap: true,
                    animationEasing: 'quadraticIn', //初始动画
                    barGap: '-100%', //柱间距离,用来将上下两种圆环重合
                    z: 200, //圆环层级，和zindex相似
                    itemStyle: {
                        color: colorList[2]
                    }
                },
                { //上层的圆环
                    type: 'bar',
                    barWidth: 8,
                    data: [0, 0, 0, 10],
                    coordinateSystem: 'polar',
                    name: '有害垃圾',
                    stack: '外圆',
                    roundCap: true,
                    animationEasing: 'quadraticIn', //初始动画
                    barGap: '-100%', //柱间距离,用来将上下两种圆环重合
                    z: 200, //圆环层级，和zindex相似
                    itemStyle: {
                        color: colorList[3]
                    }
                },
                {
                    //下层的圆环
                    type: 'bar',
                    barWidth: 6,
                    data: [100, 100, 100, 100],
                    coordinateSystem: 'polar',
                    roundCap: true,
                    itemStyle: {
                        //设置每一个圆环的颜色
                        color: (params) => {
                            return bgList[params.dataIndex]
                        }
                    },
                    z: 100,
                    barGap: '-100%' //柱间距离,用来将上下两种圆环重合
                }
            ],
            legend: {
                show: true,
                bottom: '-4px',
                left: '30px',
                orient: 'vertical',
                itemWidth: 24,
                itemHeight: 12,
                itemGap: 16,
                textStyle: {
                    fontSize: 16,
                    color: '#fff'
                },
                formatter: (name) => {
                  console.log(name)
                    const valueIndex = pieDatas.map((item) => item.name).indexOf(name)
                    return name + '  ' + pieDatas[valueIndex].value + '吨'
                }
            }
        }
        self.$nextTick(() => {
            document.getElementById('rubbishChart').style.width =
                self.$refs.rubbishChartBox.offsetWidth + 'px'
            document.getElementById('rubbishChart').style.height =
                self.$refs.rubbishChartBox.offsetHeight + 'px'
            const myChart = self.$echarts.init(document.getElementById('rubbishChart'))
            myChart.setOption(option, true)
        })
    },
    methods: {}
}
</script>
